<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/forms.html -->
		<title>表单输入绑定</title>
	</head>
	<body>
		<!-- 
			可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
			
			v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
			
			v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
			
			text 和 textarea 元素使用 value property 和 input 事件；
			checkbox 和 radio 使用 checked property 和 change 事件；
			select 字段将 value 作为 prop 并将 change 作为事件。
			对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
		 
		 -->
		<div id="vm1">

			<input v-model="message" placeholder="edit me" />
			<p>Message is :{{message}}</p>

			<!-- 多行文本 -->
			<textarea v-model="message2" placeholder="add multiple lines"></textarea>
			<p style="white-space: pre-line;">Message2 is :{{message2}}</p>
			<!-- 多个复选框，绑定到同一个数组： -->
			<div style="margin-top: 20px;">
				<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
				<label for="jack">Jack</label>
				<input type="checkbox" id="john" value="John" v-model="checkedNames">
				<label for="john">John</label>
				<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
				<label for="mike">Mike</label>
				<br>
				<span>Checked names: {{ checkedNames }}</span>
			</div>

			<!-- 单选按钮 -->
			<div>
				<input type="radio" id="one" value="One" v-model="picked">
				<label for="one">One</label>
				<br>
				<input type="radio" id="two" value="Two" v-model="picked">
				<label for="two">Two</label>
				<br>
				<span>Picked: {{ picked }}</span>
			</div>


			<button type="button" @click="sumbit">提交</button>

		</div>



		<script>
			var data = {
				message: '',
				message2: '',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/list.html',
				isActive: true,
				isGreen: true,
				color: '#FF0000',
				size: '50px',
				type: 'C',
				isShow: true,
				numbers: [1, 2, 3, 4, 5, 6],
				counter: 0,
				checkedNames: [],
				picked: '',
				txt:'test',
			}

			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					greet: function(str, e) {

						alert(str)
						// alert(this.message)// 可以访问data 里的属性
						console.log(e)
					},
					sumbit:function(){
						console.log(this.txt)
						//收集多行文本的值
						var postobj = {
							msg1:this.message,
							msg2:this.message2,
							checkvalue:this.checkedNames,
						}
						
						console.log(postobj)
					}
				}
			})
		</script>
	</body>
</html>
